<template>
    <main class="page-bg" id="canvasDom">
        <header class="header flex-start">
            <section class="logo flex-center">
                <h2>企业LOGO</h2>
            </section>
            <header data-html2canvas-ignore="true">
                <ScreenshotKit :downloadName="'企业端'" />
            </header>
            <section class="logo-except flex-between">
                <section>企业端</section>
                <section class="flex-end">
                    <n-input placeholder="搜索" class="mr50">
                        <template #prefix>
                            <n-icon :component="FlashOutline" />
                        </template>
                        <template #suffix>
                            <n-icon size="20"><SearchOutline/></n-icon>
                        </template>
                    </n-input>

                    <n-dropdown
                        trigger="hover"
                        :options="notifiOptions"
                        :render-option="renderOption"
                        @select="handleSelect"
                    >
                        <n-badge :value="value" dot class="mr50">
                            <n-icon size="20"><NotificationsOutline /></n-icon>
                        </n-badge>
                    </n-dropdown>
                    
                    <header class="avatar flex-center mr50">
                        <n-dropdown :options="options">
                            <n-avatar
                                round
                                :size="30"
                                src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                                />
                        </n-dropdown>
                        
                    </header>
                    
                </section>
            </section>
        </header>
        <header class="header-text flex-start">代办流程</header>
        <n-grid x-gap="12" :cols="7" class="p20">
            <n-gi class="flex-start gi-box" v-for="(item, i) in cardList" :key="i"
            :style="{background: item.bg}">
                <component :is="item.icon"/>
                <n-flex vertical>
                    <p class="card-text">{{item.label}}</p>
                    <p class="card-num">{{item.num}}</p>
                </n-flex>
                <component :is="item.icon" class="right-bottom-bg" />
            </n-gi>
        </n-grid>
        <header class="header-text flex-start">交易大厅</header>
        <section class="p20">
            <n-grid cols="3" x-gap="20" item-responsive responsive="screen">
                <n-grid-item span="0 m:1 l:2">
                    <section class="graphic-area">
                        <header class="flex-between graphic-header">
                            <span>外汇行情</span>
                            <n-radio-group v-model:value="tvalue" name="radiobuttongroup1" >
                                <n-radio-button
                                    v-for="item in timeList"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                    @change="handleTimeClick"
                                />
                            </n-radio-group>
                        </header>
                        <BaseLine v-if="LShow" :canvasHeight="385" :data="blData" />
                    </section>
                    <section class="graphic-area">
                        <header class="flex-between graphic-header">
                            <span>大宗商品价格</span>
                            <n-radio-group v-model:value="tvalue" name="radiobuttongroup1" @on-update:value="handleTimeClick">
                                <n-radio-button
                                    v-for="item in timeList"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                />
                            </n-radio-group>
                        </header>
                        <BaseLine v-if="LShow" :canvasHeight="385" :data="blData" />
                    </section>
                </n-grid-item>
                <n-grid-item>
                    <section class="graphic-area">
                        <header class="flex-start graphic-header">
                            <span>货物交易</span>
                        </header>
                        <MoreBar v-if="show" :canvasHeight="240" :data="mbData" />
                    </section>
                    <section class="graphic-area">
                        <header class="flex-start graphic-header">
                            <span>融资货物</span>
                        </header>
                        <MoreBar v-if="show" :canvasHeight="240" :data="mbData2" />
                    </section>
                    <section class="graphic-area">
                        <header class="flex-start graphic-header">
                            <span>自有货物统计</span>
                        </header>
                        <LoopPie v-if="show" :canvasHeight="240" :data="lpData" />
                    </section>
                </n-grid-item>
            </n-grid>
        </section>
        <section class="graphic-area m20">
            <header class="flex-start graphic-header">
                <span>物流地图</span>
            </header>
            <WorldMaps v-if="show" :canvasHeight="640" :data="wmData" />
        </section>
        <section class="graphic-area page-footer m20 flex-center">
        二〇二三年七月二十九日 @END
        </section>
    </main>
</template>

<script setup lang="ts">
import { ref, reactive, h, onMounted, nextTick } from 'vue'
import { NotificationsOutline, SearchOutline,FlashOutline,
    Pencil as EditIcon,
    HomeOutline as HomeIcon,
    PersonCircleOutline as UserIcon,
    CardOutline,DocumentTextOutline,ShieldCheckmarkOutline,PrintOutline,DocumentsOutline,CubeSharp,CashOutline
} from '@vicons/ionicons5'
import { NIcon, useMessage, NTooltip} from 'naive-ui'
import BaseLine from '@/components/charts11/BaseLine.vue'
import MoreBar from '@/components/charts11/MoreBar.vue'
import LoopPie from '@/components/charts11/LoopPie.vue'
import WorldMaps from '@/components/maps/WorldMaps.vue'
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';

const message = useMessage()

function renderIcon(icon: Component, size) {
  return () => {
    return h(NIcon, size ? {
        size: size,
        color: '#ffffff'
    } : null, {
      default: () => h(icon)
    })
  }
}

const show = ref(false)
const LShow = ref(false)
const value = ref(5)
const tvalue = ref('year')
const BaseLine1 = ref(null)
const options = [
    {
        label: '个人资料',
        key: 'profile',
        icon: renderIcon(UserIcon)
    },
    {
        label: '编辑资料',
        key: 'editProfile',
        icon: renderIcon(EditIcon)
    },
    {
        label: '回到首页',
        key: 'home',
        icon: renderIcon(HomeIcon)
    }
]
const renderOption = ({
    node,
    option
    }: {
    node: VNode
    option: DropdownOption | DropdownGroupOption
    }) => {
    return h(
        NTooltip,
        { keepAliveOnHover: false, style: { width: 'max-content' } },
        {
        trigger: () => [node],
        default: () => option.key
        }
    )
}

const notifiOptions = [
    {
        label: '滨海湾金沙，新加坡',
        key: 'marina bay sands',
        disabled: true
    },
    {
        label: '布朗酒店，伦敦',
        key: 'brown\'s hotel, london'
    },
    {
        label: '亚特兰蒂斯巴哈马，拿骚',
        key: 'atlantis nahamas, nassau'
    },
    {
        label: '比佛利山庄酒店，洛杉矶',
        key: 'the beverly hills hotel, los angeles'
    }
]
const cardList = [
    {
        label: '资产交易中心',
        key: '1',
        num: 10,
        icon: renderIcon(CardOutline, 40),
        bg: "linear-gradient(to right, #db6aed, #9064f7)"
    },
    {
        label: '协议管理',
        key: '1',
        num: 10,
        icon: renderIcon(DocumentTextOutline, 40),
        bg: "linear-gradient(to right, #60aeff, #698bfe)"
    },
    {
        label: '合同管理',
        key: '1',
        num: 10,
        icon: renderIcon(DocumentsOutline, 40),
        bg: "linear-gradient(to right, #ff816b, #fe7194)"
    },
    {
        label: '贷权转移与开票',
        key: '1',
        num: 10,
        icon: renderIcon(PrintOutline, 40),
        bg: "linear-gradient(to right, #32c7c1, #18a0ce)"
    },
    {
        label: '支付结算',
        key: '1',
        num: 10,
        icon: renderIcon(ShieldCheckmarkOutline, 40),
        bg: "linear-gradient(to right, #ffb284, #ffd173)"
    },
    {
        label: '融资申请',
        key: '1',
        num: 10,
        icon: renderIcon(CashOutline, 40),
        bg: "linear-gradient(to right, #25c5be, #47e5aa)"
    },
    {
        label: '智慧物流管理',
        key: '1',
        num: 10,
        icon: renderIcon(CubeSharp, 40),
        bg: "linear-gradient(to right, #fe5f85, #fc69d4)"
    },
]
const timeList = reactive([
    { value: 'year', label: '年' },
    { value: 'qur', label: '季度' },
    { value: 'month', label: '月' },
])
let blData = ref({
    xAxisDataList: [],
    seriesDataList: []
})
let mbData = reactive({
    xAxisDataList: [],
    seriesDataList: []
})
let mbData2 = reactive({
    xAxisDataList: [],
    seriesDataList: []
})
let lpData = reactive({
    seriesDataList: []
})
let wmData  = reactive({
    seriesDataList: []
})

const handleSelect = (key: string | number) => {
    message.info(String(key))
}
const handleTimeClick = () => { 
    LShow.value = false
    tvalue.value === 'year' && chartTabs(20)
    tvalue.value === 'qur' && chartTabs(4)
    tvalue.value === 'month' && chartTabs(12)
}
const chartTabs = (times) => {
    blData.value.xAxisDataList = []
    blData.value.seriesDataList = []
    for (let index = 0; index < times; index++) {
        let inum = Math.floor(Math.random() * (10000 - 100 + 100)) + 100;
        times === 20 && blData.value.xAxisDataList.push('20'+(index+10)+'年')
        times === 12 && blData.value.xAxisDataList.push((index+1)+'月')
        times === 4 && blData.value.xAxisDataList.push('Q'+(index+1))
        blData.value.seriesDataList.push(inum)
    }
    nextTick(() => {LShow.value = true}) 
}
const init = () => {
    chartTabs(20)

    mbData.xAxisDataList = ['大豆','化工','模型','纺织','染色','钢铁']
    mbData.seriesDataList = [
        {
            name: "买入",
            data: [9000, 8000, 8500, 7500, 7800, 6500]
        },
        {
            name: "卖出",
            data: [8000, 7200, 8500, 5000, 4500, 6000]
        }
    ].map(m => {
        m['type'] = "bar"
        m['barWidth'] = 12
        m['itemStyle'] = {borderRadius: [16,16,0,0]}
        return m
    })

    mbData2.xAxisDataList = ['自由货物','已抵押货物']
    mbData2.seriesDataList = [
        {
            name: "贸易总量",
            data: [19000, 8000]
        },
        {
            name: "贸易价格",
            data: [28000, 10200]
        }
    ].map(m => {
        m['type'] = "bar"
        m['barWidth'] = 12
        m['itemStyle'] = {borderRadius: [16,16,0,0]}
        return m
    })

    lpData.seriesDataList = [
        { name: '大豆', value: 32000},
        { name: '化工', value: 9000 },
        { name: '模型', value: 12000},
        { name: '纺织', value: 10000},
        { name: '染色', value: 24000},
        { name: '钢铁', value: 15000},
    ]

    wmData.seriesDataList = [
        { name: "China",  value: 1000},
        { name: "Russia", value: 120, },
        { name: "Sudan",  value: 100, },
        { name: "Brazil", value: 150, },
    ]
    
    show.value = true
}
init()
onMounted(() => {
    // 在页面加载后，通过ref引用获取DOM元素
    console.log(BaseLine1.value); // 访问DOM元素
});
</script>

<style scoped>
.page-bg {
    width: 100%;
    min-height: 100vh;
    background-color: #fafbff;
}
.header {
    width: 100%;
    height: 50px;
    border: 1px solid #0000ff;
    color: #fff;
    background-color: #0000ff;
    box-sizing: border-box;
}
.logo {
    width: 20%;
    height: 50px;
    /* background-color: #13cff9; */
    background: linear-gradient(to right, #60aeff, #698bfe);
}
.logo-except {
    width: 80%;
    padding: 0 20px;
    box-sizing: border-box;
}
.avatar {
    width: 50px;
    height: 50px;
}
.mr50 {
    margin-right: 50px;
}
.header-text {
    width: 100%;
    height: 50px;
    color: #0000ff;
    text-align: left;
    padding-left: 20px;
}
.p20 {
    padding: 0 20px;
}

.card-text {
    font-size: 14px;
    text-align: left;
    padding-left: 20px;
    line-height: 20px;
    color: #ffffff;
}
.card-num {
    font-size: 20px;
    text-align: left;
    padding-left: 20px;
    line-height: 26px;
    color: #ffffff;
}
.gi-box {
    padding: 10px; 
    border-radius: 8px;
    position: relative;
}
.right-bottom-bg {
    position: absolute;
    right: 10px;
    bottom: -10px;
    opacity: .4;
}
.graphic-area{
    /* width: 100%; */
    min-height: 100px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 2px 2px #ededed;
    margin-bottom: 20px;
}
.page-footer {
    background-color: #999999;
    color: #ffffff;
}
.graphic-header {
    padding: 10px 20px;
}
.graphic-header span:first-child {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}
.m20 {
    margin: 0 20px 20px 20px;
}
:deep(.n-input) {
    background-color: rgb(255, 255, 255, .2);
    border-color: rgb(255, 255, 255, .2);
}
</style>
